html,body{
    height: 100%;
}
body{
    margin: 0;
    background: url("../img/bg2.jpg") no-repeat 0 0/100% 100%;
    perspective: 1000px;
    display: flex;
    justify-content: center;
}
ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
.list{
    float: left;
    display: grid;
    grid-template: repeat(3,100px)/repeat(5,100px);
    grid-gap: 10px;
    margin: 140px auto 0;
    padding-top: 40px;
}

.list li{
    background: rgba(0,0,0,0.3);
    font: 30px/100px '';
    text-align: center;
    color: #fff;
    position: relative;
    border-radius: 14px;
    transform-style: preserve-3d;
}

.list li.active{
    animation: sca 0.3s ease-in-out;
}

.list li.active .icon{
    animation: rotate 0.3s ease-in-out;
}

.list li .icon{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    animation: breathe 1s ease-in-out 2.5s infinite alternate both;
}

.list li .icon:before{
    content: '';
    width: 100%;
    height: 100%;
    left: 50%;
    top: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    background: radial-gradient( circle closest-side, rgba(0, 0, 0, 0) 15%, rgba(255, 252, 183, 0.3) 55%, rgba(0, 0, 0, 0) 85% );
    opacity: 0;
    animation: fadeIn 3s ease 1s forwards;
}

.list li svg{
    position: absolute;
    top:0;
    left:0;
}

.path{
    stroke-width: 2;
    stroke: #fefcb2;
    fill: rgba(0, 0, 0, 0);
    opacity: 0;
    -webkit-transform: scale(0.5);
    -ms-transform: scale(0.5);
    transform: scale(0.5);
    transform-origin: center;
    animation: shape-rect-431 2s linear 0.5s forwards;
}

@keyframes rotate {
    0%{
        transform: rotateY(0deg);
    }
    100%{
        transform: rotateY(540deg);
    }
}

@keyframes sca {
    0%{
        transform: scale(1);
    }
    40%{
        transform: scale(0.8);
    }
    100%{
        transform: scale(1);
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes breathe {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    100% {
        -webkit-transform: scale(0.95);
        transform: scale(0.95);
    }
}

@keyframes shape-rect-431 {
    0% {
        opacity: 0;
        stroke-dashoffset: 431;
    }
    50% {
        opacity: 0.8;
        stroke-dashoffset: 215.5;
    }
    100% {
        opacity: 1;
        stroke-dashoffset: 0;
    }
}

@keyframes dash {
    0% {
        opacity: 0;
        stroke-dashoffset: 120;
    }
    100% {
        opacity: 1;
        stroke-dashoffset: 0;
    }
}

@keyframes shape-circle-338 {
    0% {
        opacity: 0;
        stroke-dashoffset: 338;
    }
    50% {
        opacity: .8;
        stroke-dashoffset: 169;
    }
    100% {
        opacity: 1;
        stroke-dashoffset: 0;
    }
}